<template>
  <div>
    <!-- 条件查询加油退款订单表单 -->
    <div class="check-form-box">
      <el-form
        :inline="true"
        :model="searchModel.data"
        class="demo-form-inline"
      >
        <el-form-item label="订单号">
          <el-input
            v-model.trim="searchModel.orderNo"
            placeholder="请输入订单号"
          />
        </el-form-item>
        <el-form-item label="能链流水号">
          <el-input
            v-model.trim="searchModel.nlUuid"
            placeholder="请输入能链流水号"
          />
        </el-form-item>
        <el-form-item label="华行通退款流水号">
          <el-input
            v-model.trim="searchModel.wnUuid"
            placeholder="请输入华行通退款流水号"
          />
        </el-form-item>
        <el-form-item label="退款时间">
          <el-date-picker
            v-model="searchModel.refundTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="折扣卡批次">
          <el-input
            v-model.trim="searchModel.discountCardRuleid"
            placeholder="请输入折扣卡批次"
          />
        </el-form-item>
        <el-form-item label="折扣卡ID">
          <el-input
            v-model.trim="searchModel.discountCardId"
            placeholder="请输入折扣卡ID"
          />
        </el-form-item>
        <el-form-item label="能链订单状态">
          <el-select
            v-model="searchModel.nlOrderStatus"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in nlOrderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="华行通订单状态">
          <el-select
            v-model="searchModel.wnOrderStatus"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in wnOrderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="subBtnBox">
        <el-button type="primary" color="#ea5b24" @click="searchOrder()"
          >查询</el-button
        >
      </div>
    </div>

    <!-- 加油退款订单列表 -->
    <div style="margin-top: 20px">
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="nlUuid" width="180" label="能链流水号" />
        <el-table-column prop="wnUuid" width="180" label="华行通退款流水号" />
        <el-table-column
          prop="refundTime"
          width="160"
          :formatter="rejigTime"
          label="退款时间"
        />
        <el-table-column prop="refundAmount" label="退用户总额" />
        <el-table-column prop="enterpriseRealRufundAmount" label="退企业总额" />
        <el-table-column prop="discountCardRuleid" label="折扣卡批次" />
        <el-table-column prop="discountCardId" label="折扣卡ID" />
        <el-table-column prop="refundReason" label="退款原因">
          <template #default="scope">
            <el-button
              link
              type="text"
              size="small"
              @click="reasonClick(scope.row, 1)"
              v-if="scope.row.refundReason"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="refundFailReason" label="退款失败原因">
          <template #default="scope">
            <el-button
              link
              type="text"
              size="small"
              @click="reasonClick(scope.row, 2)"
            >
              查看
            </el-button>
          </template>
        </el-table-column> -->

        <!-- <el-table-column
          prop="orderStatus"
          :formatter="judgeState"
          label="订单状态"
        /> -->
        <el-table-column
          prop="nlOrderStatus"
          width="110"
          :formatter="judgeNlOrderStatus"
          label="能链订单状态"
        />
        <el-table-column
          prop="wnOrderStatus"
          width="110"
          :formatter="judgeWnOrderStatus"
          label="华行通订单状态"
        />
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>

    <el-dialog
      title="退款原因"
      v-model="refundReasonVisible"
      :visible.sync="refundReasonVisible"
      width="30%"
    >
      <span>{{ refundReason }}</span>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>

    <el-dialog
      title="退款失败原因"
      v-model="refundFailReasonVisible"
      :visible.sync="refundFailReasonVisible"
      width="30%"
    >
      <span>{{ refundFailReason }}</span>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { findRefuelRefundOrderApi } from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime";

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

//退款原因显示
const refundReasonVisible = ref(false);
const refundReason = ref("");
//退款失败原因显示
const refundFailReasonVisible = ref(false);
const refundFailReason = ref("");

// 能链订单状态枚举
const nlOrderStatusOptions: any = reactive([
  { value: null, label: "全部" },
  { value: "0", label: "待支付" },
  { value: "1", label: "已支付" },
  { value: "2", label: "退款中" },
  { value: "4", label: "订单取消" },
  { value: "5", label: "已退款" },
  { value: "7", label: "退款失败" },
]);

// 华行通订单状态枚举
const wnOrderStatusOptions: any = reactive([
  { value: null, label: "全部" },
  { value: "0", label: "退款中" },
  { value: "1", label: "退款失败" },
  { value: "2", label: "退款成功" },
]);

// 判断能链状态显示
const judgeNlOrderStatus = (row) => {
  switch (row.nlOrderStatus) {
    case 0:
      return "待支付";
    case 1:
      return "已支付";
    case 2:
      return "退款中";
    case 4:
      return "订单取消";
    case 5:
      return "已退款";
    case 7:
      return "退款失败";
    default:
      return "";
  }
};

// 判断华行通状态显示
const judgeWnOrderStatus = (row) => {
  switch (row.wnOrderStatus) {
    case 0:
      return "退款中";
    case 1:
      return "退款失败";
    case 2:
      return "退款成功";
    default:
      return "";
  }
};

// 搜索模型
const searchModel: any = reactive({
  discountCardId: null,
  discountCardRuleid: null,
  orderNo: null,

  nlOrderStatus: null,
  nlUuid: null,
  wnOrderStatus: null,
  wnUuid: null,

  refundTime: null,
  startRefundTime: null,
  endRefundTime: null,

  page: page,
  size: size,
});

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  findOrder(flipData);
};

//退款原因
const reasonClick = (row, refulType) => {
  if (refulType == 1) {
    refundReason.value = row.refundReason;
    refundReasonVisible.value = true;
  } else {
    refundFailReason.value = row.refundFailReason;
    refundFailReasonVisible.value = true;
  }
};

//处理时间格式
const rejigTime = (row) => {
  let strTime = "";
  row.refundTime == null ? "" : (strTime = row.refundTime.replace(/T/g, " "));
  return strTime;
};

// 搜索加油退款订单
const searchOrder = () => {
  page.value = 1;
  if (searchModel.refundTime) {
    searchModel.startRefundTime = formatDateTime(searchModel.refundTime[0]);
    searchModel.endRefundTime = formatDateTime(
      searchModel.refundTime[1]
    ).replace("00:00:00", "23:59:59");
  } else {
    searchModel.startRefundTime = null;
    searchModel.endRefundTime = null;
  }
  searchParmSearch();
  findOrder(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// 查询加油退款订单
const findOrder = (searchModel) => {
  findRefuelRefundOrderApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.data;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

onMounted(() => {
  findOrder(searchModel);
});
</script>
<style scoped>
:deep(.demo-form-inline) {
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 25%);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item) {
  width: 90%;
}

.subBtnBox {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}
</style>
